<template>
  <div
    id="d4a39b8d6dca4f8083ac016fcbf02f82"
    class="chart-container"
    style="width: 100%; height: 100%"
  ></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
onMounted(() => {
  var chart_d4a39b8d6dca4f8083ac016fcbf02f82 = echarts.init(
    document.getElementById("d4a39b8d6dca4f8083ac016fcbf02f82"),
    "white",
    { renderer: "canvas" }
  );
  var option_d4a39b8d6dca4f8083ac016fcbf02f82 = {
    animation: true,
    animationThreshold: 2000,
    animationDuration: 1000,
    animationEasing: "cubicOut",
    animationDelay: 0,
    animationDurationUpdate: 300,
    animationEasingUpdate: "cubicOut",
    animationDelayUpdate: 0,
    aria: {
      enabled: false,
    },
    color: [
      "#5470c6",
      "#91cc75",
      "#fac858",
      "#ee6666",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#ea7ccc",
    ],
    series: [
      {
        type: "heatmap",
        name: "\u76f8\u5173\u7cfb\u6570",
        data: [
          [0, 0, 1.0],
          [0, 1, 0.03],
          [0, 2, -0.01],
          [0, 3, 0.05],
          [0, 4, -0.1],
          [1, 0, 0.03],
          [1, 1, 1.0],
          [1, 2, -0.1],
          [1, 3, 0.05],
          [1, 4, 0.0],
          [2, 0, -0.01],
          [2, 1, -0.1],
          [2, 2, 1.0],
          [2, 3, -0.01],
          [2, 4, -0.04],
          [3, 0, 0.05],
          [3, 1, 0.05],
          [3, 2, -0.01],
          [3, 3, 1.0],
          [3, 4, 0.02],
          [4, 0, -0.1],
          [4, 1, 0.0],
          [4, 2, -0.04],
          [4, 3, 0.02],
          [4, 4, 1.0],
        ],
        label: {
          show: true,
          position: "inside",
          margin: 8,
        },
      },
    ],
    legend: [
      {
        data: ["\u76f8\u5173\u7cfb\u6570"],
        selected: {
          "\u76f8\u5173\u7cfb\u6570": true,
        },
        show: true,
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        backgroundColor: "transparent",
        borderColor: "#ccc",
        borderWidth: 1,
        borderRadius: 0,
        pageButtonItemGap: 5,
        pageButtonPosition: "end",
        pageFormatter: "{current}/{total}",
        pageIconColor: "#2f4554",
        pageIconInactiveColor: "#aaa",
        pageIconSize: 15,
        animationDurationUpdate: 800,
        selector: false,
        selectorPosition: "auto",
        selectorItemGap: 7,
        selectorButtonGap: 10,
        left: "center",
        top: "3%",
        icon: "roundRect",
      },
    ],
    tooltip: {
      show: true,
      trigger: "item",
      triggerOn: "mousemove|click",
      axisPointer: {
        type: "line",
      },
      showContent: true,
      alwaysShowContent: false,
      showDelay: 0,
      hideDelay: 100,
      enterable: false,
      confine: false,
      appendToBody: false,
      transitionDuration: 0.4,
      formatter: function (params) {
        return (
          "X: " +
          params.value[0] +
          "<br/>Y: " +
          params.value[1] +
          "<br/>Value: " +
          params.value[2]
        );
      },
      textStyle: {
        fontSize: 14,
      },
      borderWidth: 0,
      padding: 5,
      order: "seriesAsc",
    },
    xAxis: [
      {
        show: true,
        scale: false,
        nameLocation: "end",
        nameGap: 15,
        gridIndex: 0,
        axisLabel: {
          show: true,
          margin: 8,
        },
        inverse: false,
        offset: 0,
        splitNumber: 5,
        minInterval: 0,
        splitLine: {
          show: true,
          lineStyle: {
            show: true,
            width: 1,
            opacity: 1,
            curveness: 0,
            type: "solid",
          },
        },
        data: [
          "\u5e74\u9f84",
          "\u5b66\u4e60\u538b\u529b",
          "\u5b66\u4e60\u6ee1\u610f\u5ea6",
          "\u5b66\u4e60\u65f6\u95f4",
          "\u7ecf\u6d4e\u538b\u529b",
        ],
      },
    ],
    yAxis: [
      {
        show: true,
        scale: false,
        nameLocation: "end",
        nameGap: 15,
        gridIndex: 0,
        inverse: false,
        offset: 0,
        splitNumber: 5,
        minInterval: 0,
        splitLine: {
          show: true,
          lineStyle: {
            show: true,
            width: 1,
            opacity: 1,
            curveness: 0,
            type: "solid",
          },
        },
        data: [
          "\u5e74\u9f84",
          "\u5b66\u4e60\u538b\u529b",
          "\u5b66\u4e60\u6ee1\u610f\u5ea6",
          "\u5b66\u4e60\u65f6\u95f4",
          "\u7ecf\u6d4e\u538b\u529b",
        ],
      },
    ],
    title: [
      {
        show: true,
        text: "\u6570\u503c\u578b\u7279\u5f81\u4e4b\u95f4\u76f8\u5173\u6027",
        target: "blank",
        subtarget: "blank",
        top: "3%",
        padding: 5,
        itemGap: 10,
        textAlign: "auto",
        textVerticalAlign: "auto",
        triggerEvent: false,
      },
    ],
    visualMap: {
      show: true,
      type: "continuous",
      min: -0.2,
      max: 1,
      inRange: {
        color: ["#01847F", "#FFFFF0", "#F9D2E4"],
      },
      calculable: true,
      inverse: false,
      splitNumber: 5,
      hoverLink: true,
      orient: "vertical",
      bottom: "8%",
      right: "left",
      padding: 5,
      showLabel: true,
      itemWidth: 20,
      itemHeight: 140,
      borderWidth: 0,
    },
  };
  chart_d4a39b8d6dca4f8083ac016fcbf02f82.setOption(
    option_d4a39b8d6dca4f8083ac016fcbf02f82
  );
});
</script>

<style></style>
